<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">登录</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg02.png')" mode="widthFix"></image>
			<view class="bg_content">
				
				<view class="logo_box">
					<image :src="getImgSrc('/static/logo02.png')" mode="widthFix"></image>
				</view>
				<!-- <view class="public_title">欢迎登录</view>
				
				<view class="input_list">
					<view class="icon iconfont icon-shouji"></view>
					<input type="text" value="" v-model="phone" placeholder="请输入手机号" />
				</view> -->
				
<!-- 				<view class="input_list">
					<view class="icon iconfont">&#xe65d;</view>
					<view class="line"></view>
					<input type="text" :password="passType" value="" v-model="password" placeholder="请输入密码" />
					<view class="see iconfont" @tap="seePassword">&#xe61d;</view>
				</view> -->
				
				<!-- <view class="input_list">
					<view class="icon iconfont icon-xiugaimima"></view>
					<input type="text" maxlength="4" value="" v-model="yzm" placeholder="请输入验证码" />
					<button plain="false" class="yzm" @click="getCode" :disabled="disabled">
						{{ countdown }}
						<text v-show="timestatus">秒重获</text>
					</button>
				</view> -->
				
				<button class="confirm02" @tap="colsePupu">微信一键登录</button>
				
				<!-- <view class="rule_list" @tap="checkedAuto">
					<checkbox style="scale: 0.8;" color="#FF7F22" :checked="checked"></checkbox>
					<view>
						我同意并阅读
						<text style="color: #FC5D20;" :data-url="'/pages/personalcenter/privacy?type=' + 8" @click="gotopage">《平台隐私政策》和</text>
						<text style="color: #FC5D20;" :data-url="'/pages/personalcenter/privacy?type=' + 11" @click="gotopage">《平台注册协议》</text>
					</view>
				</view> -->

				
			</view>
		</view>
		<view class="show_box" v-show="pupu_show" @click="colsePupu($event)">
			<view class="pupu_box" @click.stop.prevent>
				<view class="text">获取手机号快捷登录</view>
				<view class="shuom">
					<view>获取您的手机号用于快捷登录</view>
				</view>
				<view class="loky">
					<view class="xx" @tap="colsePupu">取消</view>
					<view class="xt">
						手机号登录
						<button style="display:block;width:40vw;height: 40px;margin-top:-39px;margin-left: -8px; opacity:0.0;"
							class="wx_box iconfont xt" type="default" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber" withCredentials="true"></button>
					</view>
				</view>
			</view>
		
			<PrivacyPop ref="PrivacyPopck"></PrivacyPop>
			<link-us :pupu_show="pshow" :hand_plat_phones="hand_plat_phones" @pu_close="pu_close"></link-us>
		</view>
	</view>
</template>

<script>
	import PrivacyPop from '@/components/PrivacyPop.vue';
	import linkUs from '@/components/link-us.vue';
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				phone:'',
				yzm:'',
				countdown: '获取验证码',
				disabled: false,
				timestatus: false,
				clear: '',
				checked:false,
				pupu_show:false,
				pshow: false,
				jscode:'',
			}
		},
		computed: {
			hand_plat_phones() {
				if (this.vuex?.appInfo?.plat_phone) {
					let str = this.vuex.appInfo.plat_phone.toString();
					let plat_phones = str.split('|');
					return plat_phones;
				}
			},
		},
		onLoad() {
			uni.removeStorageSync('_TOKEN_');
			this.get_code();
		},
		methods: {
			pu_show() {
				console.log(this.pshow)
				this.pshow = !this.pshow;
				console.log(this.pshow)
			},
			pu_close() {
				this.pshow = false;
			},
			colsePupu(ev) {
				this.pupu_show = !this.pupu_show;
			},
			getPhoneNumber: function(e) {
				this.throttle(this.real_getPhoneNumber(e), 3000);
			},
			real_getPhoneNumber(e) {
				let that = this;
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
					that.Msg.Fail('需要授权获取你的手机号');
				} else {
					// 允许授权  
					if (this.jscode == '') {
						that.Msg.Fail('网络有误,请刷新小程序');
						return false;
					}
					let pid = uni.getStorageSync('pid');
					if (pid){
						this.pid = pid;
					}
					let param = {
						appId: 'wx53a1918b99645f5f',
						encryptedData: e.detail.encryptedData, //加密的用户信息 
						iv: e.detail.iv, //加密算法的初始向量   
						jscode: this.jscode,
						pid: this.pid
					}
					that.Net._post('index/get_wx_phone', param, res => {
						let ret = res.data;
						if (res.code == 200) {
							that.pupu_show = false;
							let user = ret.data.data;
							that.Net._setToken(res.data.token);
							// uni.setStorageSync('pid', 0);
							that.Msg.Success('登陆成功', res => {
								uni.navigateTo({
									url: 'pages/personalcenter/personalcenter'
								});
							});
						}else {
							that.Msg.Fail(ret.msg)
						}
					});
				}
			},
			get_code() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.jscode = loginRes.code;
						
					}
				});
			},
			throttle(fn, delay) {
			  let timer = null;
			  return function() {
				let context = this, args = arguments;
				if (!timer) {
				  timer = setTimeout(() => {
					fn.apply(context, args);
					timer = null;
				  }, delay);
				}
			  };
			},
			checkedAuto() {
				let that = this;
				that.checked = !that.checked;
			},
			// 获取验证码
			getCode() {
				var that = this;
				if (!that.phone) {
					that.Msg.Fail('手机号不能为空');
					return;
				}
				that.disabled = true; //禁用点击
				that.countdown = 60;
				that.timestatus = true;
				that.clear = setInterval(that.countDown, 1000);
			},
			// 倒计时
			countDown() {
				var that = this;
				if (!that.countdown) {
					that.disabled = false;
					that.timestatus = false;
					that.countdown = '获取验证码';
					clearInterval(that.clear);
				} else {
					--that.countdown;
				}
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
			// 	that.Net._get('shop_home', {}, res => {
			// 		if (res.code == 200) {
			// 			//console.log(res);
			
			// 		}
			// 	});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		  // that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
		  //   if (res.code == 200) {
		  //     //console.log(res)
		  //     if (res.data.data == '') {
		  //       uni.showToast({
		  //         title: '已经是最后一页了',
		  //         duration: 2000,
		  //         icon: 'none'
		  //       });
		  //     } else {
		  //       that.info = that.info.concat(res.data.data); //将数据拼接在一起
		  //     }
		  //   } else if (res.code == 0) {
		  //     that.Msg.Success(res.msg, res => {});
		  //   }
		  // });
		},
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back{
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.logo_box {
		width: 100%;
		padding: 6vw;
		box-sizing: border-box;
		margin-top: 30vw;
	}
	
	.logo_box image {
		width: 34vw;
		margin: 0 auto;
	}
	
	.public_title {
		width: 92%;
		margin: 0 auto;
		font-size: 7vw;
		color: #333;
		font-weight: bold;
	}
	
	.input_list {
		width: calc(84%);
		height: 13.5vw;
		margin: 0 auto;
		border-radius: 3vw;
		display: flex;
		position: relative;
		margin-top: 5vw;
		padding-left: 3vw;
		background-color: #FFFFFF;
	}
	
	.input_list .icon {
		font-size: 6vw;
		color: #333;
		width: 14vw;
		line-height: 13.5vw;
		height: 13.5vw;
		text-align: center;
	}
	
	.input_list .line {
		width: 1px;
		height: 6vw;
		margin-top: 3.75vw;
		background-color: #dedfdf;
	}
	
	.input_list input {
		flex: 1;
		font-size: 14px;
		height: 50px;
		line-height: 50px;
		color: #333;
		margin-left: 4vw;
	}
	
	.input_list .forget {
		width: 20vw;
		text-align: left;
		line-height: 13.5vw;
		font-size: 3.5vw;
		color: #1d1f24;
		margin-left: 2vw;
	}
	
	.input_list .yzm {
		font-size: 3.5vw;
		color: #1d1f24;
		font-weight: bold;
		position: absolute;
		line-height: 13.5vw;
		right: 0.3vw;
		top: 0;
		z-index: 99;
		outline: none;
		border: 0px solid #fff !important;
		background-color: transparent !important;
	}
	
	.input_list .see{
		font-size: 5vw;
		color: #333;
		width: 10vw;
		height: 50px;
		line-height: 50px;
		font-weight: bold;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 99;
	}
	
	.confirm02 {
		width: 80%;
		height: 13vw;
		border-radius: 13vw;
		line-height: 13vw;
		text-align: center;
		background-color: #FF7701;
		color: #fff;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 30vw;
	}
	
	.rule_list {
		width: 84%;
		margin: 5vw auto 0;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}
	
	
	/* 弹窗 */
	.show_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	
	.show_box .pupu_box {
		width: 100%;
		position: absolute;
		background-color: #fff;
		border-radius: 3vw 3vw 0vw 0vw;
		text-align: center;
		bottom: 0vw;
	}
	
	.show_box .pupu_box .text {
		width: 100%;
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		padding: 5vw 0vw 0vw 5vw;
	}
	
	.show_box .shuom {
		font-size: 4vw;
		color: #666;
		text-align: left;
		line-height: 25px;
		width: 90%;
		margin: 20px auto;
	}
	
	.loky {
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: auto;
		padding-bottom: 3vw;
	}
	
	.xx {
		color: #07c160;
		background-color: #f2f2f2;
		width: 45%;
		height: 10vw;
		line-height: 10vw;
		font-size: 4vw;
		font-weight: bold;
		border-radius: 2vw;
	}
	
	.xt {
		color: #fff;
		background-color: #07c160;
		width: 45%;
		height: 10vw;
		line-height: 10vw;
		font-size: 4vw;
		font-weight: bold;
		border-radius: 2vw;
	}
	
</style>
